<form name="editForm" role="form" novalidate ng-submit="vm.save()" show-validation>

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                ng-click="vm.clear()">&times;</button>
        <h4 class="modal-title" id="myUserLabel">
            Create or edit a User</h4>
    </div>
    <div class="modal-body">
        <jhi-alert-error></jhi-alert-error>
        <div class="form-group">
            <label>ID</label>
            <input type="text" class="form-control" name="id"
                   ng-model="vm.user.id" readonly>
        </div>

        <div class="form-group">
            <label class="control-label">Login</label>
            <input type="text" class="form-control" name="login"
                   ng-model="vm.user.login" ng-required="vm.user.id == null" ng-maxlength="50">

            <div ng-show="editForm.login.$invalid">
                <p class="help-block"
                   ng-show="editForm.login.$error.required">
                    This field is required.
                </p>

                <p class="help-block"
                   ng-show="editForm.login.$error.maxlength"
                  >
                    This field cannot be longer than 50 characters.
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label">First Name</label>
            <input type="text" class="form-control" name="firstName"
                   ng-model="vm.user.firstName" ng-maxlength="50">

            <div ng-show="editForm.firstName.$invalid">
                <p class="help-block"
                   ng-show="editForm.firstName.$error.maxlength"
                  >
                    This field cannot be longer than 50 characters.
                </p>
            </div>
        </div>
        <div class="form-group">
            <label>Last Name</label>
            <input type="text" class="form-control" name="lastName"
                   ng-model="vm.user.lastName" ng-maxlength="50">

            <div ng-show="editForm.lastName.$invalid">
                <p class="help-block"
                   ng-show="editForm.lastName.$error.maxlength"
                  >
                    This field cannot be longer than 50 characters.
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label">Email</label>
            <input type="email" class="form-control" name="email"
                   ng-model="vm.user.email" required ng-maxlength="100">

            <div ng-show="editForm.email.$invalid">
                <p class="help-block"
                   ng-show="editForm.email.$error.required">
                    This field is required.
                </p>

                <p class="help-block"
                   ng-show="editForm.email.$error.maxlength"
                  >
                    This field cannot be longer than 100 characters.
                </p>
				<p class="help-block"
                   ng-show="editForm.email.$error.email">
                    Your e-mail is invalid.
                 </p>
            </div>
        </div>
        <div class="form-group">
            <label for="activated">
                <input ng-disabled="vm.user.id === undefined" type="checkbox" id="activated" ng-model="vm.user.activated">
                <span>Activated</span>
            </label>
        </div>

        <div class="form-group">
            <label>Profiles</label>
            <select class="form-control" multiple name="authority" ng-model="vm.user.authorities"
                    ng-options="authority for authority in vm.authorities">
            </select>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.clear()">
            <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span
           >Cancel</span>
        </button>
        <button type="submit" ng-disabled="editForm.$invalid || isSaving" class="btn btn-primary">
            <span class="glyphicon glyphicon-save"></span>&nbsp;<span>Save</span>
        </button>
    </div>
</form>
